<template>
  <div class="mobile-container">
    <van-image
        round
        width="10rem"
        height="10rem"
        :src="state.user.user.avatar"
        fit="cover"
    />
    <van-cell-group>
      <van-cell title="身份">
        <van-tag v-for="item in role.cluberole">{{ item.club.name + "的" + getRoleName(item.role) }}</van-tag>
      </van-cell>
      <van-cell :title="state.user.user.nickname"/>
      <van-cell :title="sex"/>
      <van-cell>
        <van-button to="/owner/viewapply" size="large" color="#1c7fc1">
          查看申请的社团
        </van-button>
      </van-cell>
      <van-cell>
        <van-button size="large" color="#1c7fc1" to="/owner/viewjoined">
          查看已加入的社团
        </van-button>
      </van-cell>
      <van-cell>
        <van-button size="large" color="#1c7fc1" to="/owner/viewnotify">
          消息通知
        </van-button>


      </van-cell>
      <van-cell v-if="role.leader">
        <van-button type="warning" size="large" to="/manage">管理社团</van-button>
      </van-cell>
      <van-cell>
        <van-button size="large" type="danger" @click="userExit()">
          退出登陆
        </van-button>

      </van-cell>
    </van-cell-group>
  </div>
</template>

<script lang="ts">
import {IMobileStore, SingletonState} from "../../../interface"
import {mapState} from "vuex";
import {mapMutations} from "vuex";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {Notify} from "vant";
import {reactive, ref} from "vue";

export default {
  setup() {
    const store = useStore();
    const state: IMobileStore = store.state;
    const router = useRouter();
    const role = reactive({admin: false, leader: false, student: true, cluberole: [] as any});
    fetch("api/user/self/role/check").then(
        res => {
          if (res.status == 200) {
            return res.json();
          } else {
            throw("网络错误");
          }
        }
    ).then(json => {
      if (json.leader) {
        role.leader = true;
        role.student = false;
      }
    }).catch(error => {
      Notify(error)
    })
    store.dispatch('getUserInfo');
    fetch("api/user/self/role?size=20")
        .then(res => {
          if (res.status != 200) {
            throw "网络错误"
          }
          return res.json();
        }).then(json => {
      console.log(json)
      json.items.forEach((e: any) => {
        console.log(e)
        role.cluberole.push(e)
      })
    }).catch(error => {
      Notify({type: 'danger', message: error})
    })
    const getRoleName = function (id: number) {
      switch (id) {
        case 1:
          return '成员';
          break;
        case 2:
          return '社长';
          break;
        case 4:
          return '管理员';
          break;
        default:
          Notify("系统异常");
          return '';
          break;
      }
    }
    console.log(state.user.user.avatar)
    return {
      store, state, router, role, getRoleName
    }
  },
  computed: {
    ...mapState(["user"]),
    sex: function () {
      if ((this as any).user.gender == 1) {
        return "女";
      } else {
        return "男";
      }
    },
  },
  methods: {
    userExit() {
      fetch("api/authorize/self", {
        method: 'DELETE'
      });
      sessionStorage['login'] = SingletonState.notlogin;
      (this as any).store.commit('userExit');
      (this as any).router.push({path: "/login"});
    },
    ...mapMutations(["setUserInit"]),
  },
};
</script>

<style scoped>
.mobile-container{
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>
